<template>
    <div>
        <div class="container">
            <el-main>
                <el-form ref="webSiteInfoFormRef" :rules="webSiteInfoFormRules" :model="webSiteInfoForm" :label-width="formLabelWidth">
                    <el-form-item label="ID" prop="id" v-if="false">
                        <el-input v-model="webSiteInfoForm.id" c/>
                    </el-form-item>
					<!-- 常规信息 -->
					<el-form-item label="站点名称" prop="siteName">
                        <el-input v-model="webSiteInfoForm.siteName" clearable class="handle-input mr10" />
                    </el-form-item>
					<el-form-item label="网站LOGO" prop="siteLog">
                        <el-input v-model="webSiteInfoForm.siteLog" clearable class="handle-input mr10" />
                    </el-form-item>
					<el-form-item label="地址栏icon" prop="siteIcon">
                        <el-input v-model="webSiteInfoForm.siteIcon" clearable class="handle-input mr10" />
                    </el-form-item>
					<el-form-item label="站点网址" prop="siteWeb">
                        <el-input v-model="webSiteInfoForm.siteWeb" clearable class="handle-input mr10" />
                    </el-form-item>
                    <el-form-item label="站点标题" prop="siteTitle">
                        <el-input v-model="webSiteInfoForm.siteTitle" clearable class="handle-input mr10" />
                    </el-form-item>
                    <el-form-item label="站点SEO关键词" prop="siteSeoKeys">
                        <el-input v-model="webSiteInfoForm.siteSeoKeys" clearable class="handle-input mr10" />
                    </el-form-item>
                    <el-form-item label="网站描述" prop="siteDespt">
                        <el-input type="textarea" rows="5" v-model="webSiteInfoForm.siteDespt" clearable class="handle-input mr10" maxlength="100" show-word-limit/>
                    </el-form-item>
                    <el-form-item label="网站版权信息" prop="siteVersion">
                        <el-input type="textarea" rows="5" v-model="webSiteInfoForm.siteVersion" clearable class="handle-input mr10" maxlength="200" show-word-limit/>
                    </el-form-item>
                    <el-form-item label="网站第三方代码" prop="site3thdCode">
                        <el-input type="textarea" rows="5" v-model="webSiteInfoForm.site3thdCode" clearable class="handle-input mr10" maxlength="200" show-word-limit/>
                    </el-form-item>
                </el-form>
            </el-main>
			<el-footer>
				<el-button type="primary" @click="onSubmit">表单提交</el-button>
				<el-button @click="onReset">重置表单</el-button>
			</el-footer>
        </div>
    </div>
</template>

<script>
import { onMounted, ref, reactive, toRefs, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from "element-plus";
import { findSiteInfoInfoByAuthCode, addSiteInfo, saveSiteInfo} from '../../api/webSiteInfo';

import { NO_DATA_SELECT_ERROR, SUCCESS_ADDDATA_DIALOG_MESSAGE, SUCCESS_DELDATA_DIALOG_MESSAGE, SUCCESS_EDITDATA_DIALOG_MESSAGE, formLabelWidth, } from "../../api/CommonErrorMessage.js";

export default {
    name: "webSiteInfo",
    setup(props, cex){
		onMounted(() => {
		});
        const router = useRouter();
		const route = useRoute();
        const formLabelWidth = ref("170px");
        let authCodeKey = '202205061139107201b4c2205b4f2a9cbbc2d4ed41ce2c';
        const loadFlg = ref(false);
		/**
         * @name 定义业务表单
         */
        const getInitFormData = () => {
            return {
				authCode: '',
				createTime: '',
				id: 0,
				publishTime: '',
				site3thdCode: '',
				siteDespt: '',
				siteIcon: '',
				siteInfo: '',
				siteLog: '',
				siteName: '',
				siteSeoKeys: '',
				siteSno: '',
				siteTitle: '',
				siteUser: '',
				siteVersion: '',
				siteWeb: ''
			}
        };
        /**
         * @name 表单初始化
         */
        const resetWebSiteInfoForm = () => {
            Object.assign(webSiteInfoForm, getInitFormData());
            
        };
		const webSiteInfoForm = reactive(getInitFormData());
		const webSiteInfoFormRef = ref(null);
        const webSiteInfoFormRules = {
            siteName: [
                { required: true, message: "请输入站点名称", trigger: "blur" },
            ],
        };
		// =========================================================================================
        // 提交
        const onSubmit = () => {
            // 表单校验
            webSiteInfoFormRef.value.validate((valid) => {
                if (valid) {
                    if(loadFlg.value){
                        saveSiteInfo(webSiteInfoForm).then((res) => {ElMessage.success(SUCCESS_EDITDATA_DIALOG_MESSAGE);});
                    } else {
                        addSiteInfo(webSiteInfoForm).then((res) => {ElMessage.success(SUCCESS_ADDDATA_DIALOG_MESSAGE);});
                    }
                } else {
                    return false;
                }
            });
        };
        // 重置
        const onReset = () => {
			resetWebSiteInfoForm();
        };
        // 页面初始化
        const func_onload = () => {
            findSiteInfoInfoByAuthCode(authCodeKey).then((res) => {
                if(res.data === null) {
                    loadFlg.value = false;
                } else {
                    loadFlg.value = true;
                    Object.keys(webSiteInfoForm).forEach((item) => {
                        webSiteInfoForm[item] = res.data[item];
                    });
                }
            });
        }
        func_onload();
		// =========================================================================================
        return {
			authCodeKey, loadFlg, formLabelWidth, resetWebSiteInfoForm, getInitFormData, 
            webSiteInfoFormRules, webSiteInfoFormRef, webSiteInfoForm,
            func_onload, onSubmit, onReset,
        };
    },
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 300px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
</style>